<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">



  <select name="123" v-model="fruits" multiple>
    <option value="苹果" >苹果</option>
    <option value="香蕉" >香蕉</option>
    <option value="葡萄" >葡萄</option>
    <option value="橘子" >橘子</option>
  </select>
  <h2>你的选择则{{fruits}}</h2>

  <!--值绑定 可以动态的 给option的value赋值 使用v-model 绑定一个数组 来收集绑定的数据-->
  <label v-for="item in originHobbies" >
    <input type="checkbox"  :value="item" v-model="hobbies">{{item}}
  </label>
  <h2>你的选择则{{hobbies}}</h2>

</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:"message",
      Fruit:'香蕉',
      fruits:[],
      originHobbies:['唱','跳','rap','足球'],
      hobbies:[]
    },
    methods:{



    }

  })
</script>

</body>
</html>